<template>
<div class="leftapply">

  <div class="tcftofactory-top">
    <h2>尾款付款申请单</h2>

    <div class="tcf-table">
      <h2>天津金贸链进出口有限公司</h2>
      <h2>付款申请单</h2>

      <div class="tcf-table-wrap">
        <el-row>
          <el-col :span="4"><span>申请人</span></el-col>
          <el-col :span="8">
            <input type="text" @input="handleSimpleInput" :readonly="hasBind ? !editable : true" v-model="tl_applicant" placeholder="流程发起人">
            </el-col>
          <el-col :span="4"><span>申请日期</span></el-col>
          <el-col :span="8">
              <el-date-picker
              :disabled="hasBind ? !editable : true"
               @change="selectDate"
              v-model="tl_applicationDate"
              type="date"
              format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="4"><span>申请部门</span></el-col>
          <el-col :span="8">
            <input type="text" @input="handleSimpleInput" :readonly="hasBind ? !editable : true" v-model="tl_applicationDepart" placeholder="申请部门">
            </el-col>
          <el-col :span="4"><span>付款方式</span></el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="6" class="no-border">
                <input type="checkbox" :readonly="hasBind ? !editable : true" :value="0" @click="checkBoxRadio('selPayMethods', $event)" v-model="tl_checkedPayMethods">
                <span>支票</span>
              </el-col>
              <el-col :span="10" class="no-border">
                <input type="checkbox" :readonly="hasBind ? !editable : true" :value="1" @click="checkBoxRadio('selPayMethods', $event)" v-model="tl_checkedPayMethods">
                <span>银行付款</span>
              </el-col>
              <el-col :span="8" class="no-border">
                <input type="checkbox" :readonly="hasBind ? !editable : true" :value="2" @click="checkBoxRadio('selPayMethods', $event)" v-model="tl_checkedPayMethods">
                <span>其他</span>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <el-row class="tcf-table-title">
          <el-col class="tcf-table-title-left" :span="12">付款方信息</el-col>
          <el-col class="tcf-table-title-right" :span="12">收款方信息</el-col>
        </el-row>

        <el-row>
          <el-col :span="4"><span>付款公司名称</span></el-col>
          <el-col :span="8">
            <input type="text" @input="handleSimpleInput" :readonly="hasBind? !editable : true" placeholder="请输入付款公司" v-model="tl_payCompany" />
            </el-col>
          <el-col :span="4"><span>收款公司名称</span></el-col>
          <el-col :span="8">
            <input type="text" @input="handleSimpleInput" :readonly="hasBind ? !editable : true" v-model="tl_collectionCompany" placeholder="请输入收款公司" />
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="4"><span>付款开户银行</span></el-col>
          <el-col :span="8">
            <input type="text" @input="handleSimpleInput" :readonly="hasBind? !editable : true" placeholder="付款开户银行" v-model="tl_payBank">
         </el-col>
          <el-col :span="4"><span>收款开户银行</span></el-col>
          <el-col :span="8">
            <input type="text" @input="handleSimpleInput" :readonly="hasBind ? !editable : true" placeholder="请输入收款开户银行" v-model="tl_collectionBank" />
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="4"><span>付款银行账号</span></el-col>
          <el-col :span="8">
            <input type="text" @input="handleSimpleInput" :readonly="hasBind? !editable : true" placeholder="" v-model="tl_payAccount">
          </el-col>
          <el-col :span="4"><span>收款银行账号</span></el-col>
          <el-col :span="8">
            <input type="text" @input="handleSimpleInput" :readonly="hasBind ? !editable : true"  placeholder="请输入收款开户账号" v-model="tl_collectionAccount" >
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="16">
            <el-row>
              <el-col :span="6" class="no-border"><span>付款金额大写(人民币):</span></el-col>
              <el-col :span="18" class="tcf-table-noright">
                <input type="text" @input="handleSimpleInput"  :readonly="hasBind ? !editable : true" v-model="tl_paymentBigAmount">
              </el-col>
            </el-row>
          </el-col>

          <el-col :span="8">
            <el-row>
              <el-col :span="6" class="no-border"><span>金额小写:</span></el-col>
              <el-col :span="18" class="tcf-table-noright">
                <input  @input="handleSimpleInput"  :readonly="hasBind ? !editable : true" type="number" v-model="tl_paymentAmount">
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="4"><span>付款摘要</span></el-col>
          <el-col :span="20">
            <input type="text" @input="handleSimpleInput" placeholder="付款摘要"  v-model="tl_paymentAbstract" />
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="4"><span>内贸合同编号</span></el-col>
          <el-col :span="5">
            <input type="text" @input="handleSimpleInput" placeholder="内贸合同编号"  v-model="tl_dtcNO" />
          </el-col>
          <el-col :span="3"><span>业务类型</span></el-col>
          <el-col :span="4">
            <el-select :disabled="hasBind ? !editable : true" @change="selectType"   v-model="tl_businessType">
              <el-option v-for="(item,index) in tl_businessTypeoptions" :key="index" :label="item" :value="item">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="2"><span>签订日期</span></el-col>
          <el-col :span="6">
            <el-date-picker format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" :disabled="hasBind ? !editable : true"  @change="selectDate"   v-model="tl_signDate" type="date">
            </el-date-picker>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="4"><span>合同总额</span></el-col>
          <el-col :span="8">
            <input type="text" @input="handleSimpleInput" placeholder="合同总额"  v-model="tl_contractAmount" />
          </el-col>
          <el-col :span="4"><span>已付款金额</span></el-col>
          <el-col :span="8">
            <input type="number" @input="handleSimpleInput" placeholder="已付款金额"  v-model="tl_payedMount" />
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="4"><span>本次付款金额</span></el-col>
          <el-col :span="5">
            <input type="number" @input="handleSimpleInput" placeholder="本次付款金额"  v-model="tl_thisPaymentAmount" />
          </el-col>
          <el-col :span="3" class="special-row">
            <el-row>
              <el-col :span="24" class="no-border">
                <input type="checkbox" :readonly="hasBind ? !editable : true" :value="0" @click="checkBoxRadio('thisPaymentType', $event)" v-model="tl_thisPaymentTypes">
                <span>赊销款</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" class="no-border">
                <input type="checkbox" :readonly="hasBind ? !editable : true" :value="1" @click="checkBoxRadio('thisPaymentType', $event)" v-model="tl_thisPaymentTypes">
                <span>垫税款</span>
              </el-col>
            </el-row>
          </el-col>

          <el-col :span="4"><span>未付款金额</span></el-col>
          <el-col :span="5">
            <input type="number" @input="handleSimpleInput" placeholder="未付款金额"  v-model="tl_nonPaymentAmount" />
          </el-col>
          <el-col :span="3" class="special-row">
            <el-row>
              <el-col :span="24" class="no-border">
                <input type="checkbox" :readonly="hasBind ? !editable : true" :value="0" @click="checkBoxRadio('nonPaymentType', $event)" v-model="tl_nonPaymentTypes">
                <span>赊销款</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" class="no-border">
                <input type="checkbox" :readonly="hasBind ? !editable : true" :value="1" @click="checkBoxRadio('nonPaymentType', $event)" v-model="tl_nonPaymentTypes">
                <span>垫税款</span>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </div>


    <div class="upload" id="flow_04_upload">
      <p class="upload-hint">票据/附件</p>
      <div>
        <div class="upload-btn">
          <input type="file"  v-show="hasBind ? editable : false"  name="file" multiple @change="selectFiles">
          <el-button type="primary"  :disabled="hasBind ? !editable : true">选择附件</el-button>
        </div>

        <ul class="upload-files">
          <li @mouseover="handleOver(item)" :key="index"  @mouseout="handleOut(item)" v-for="(item,index) in attachedFiles">
            <span @click="download(item.id, $event)">{{item.name}}</span>
            <span v-if="editable && item.status" class="el-icon-circle-check" style="color:#67c23a;"></span>
            <span v-else-if="editable" class="el-icon-circle-close" @click="changeFiles(index,item)" style="color:red;"></span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import {uploadFiles} from '@/server/initiatingprocess';
import { getStore} from '@/assets/js/common.js'
import {filedownload , deleteFile} from '@/server/customermanagement/index.js'

export default {
  created(){

    this.keys.forEach(key => {
        this[key] = _.cloneDeep(this.datas[key]);
    });

    this.tl_applicant = JSON.parse(getStore("userMsg")).userName;
    this.tl_applicationDepart = JSON.parse(getStore("userMsg")).orgName; 
    this.tl_payCompany = '天津金贸链进出口有限公司'
    this.tl_payBank = '中信银行股份有限公司天津自由贸易试验区分行'
    this.tl_payAccount = '8111401011700147295'

    let self = this;
    this.bus.$on('has-bind', function(){
      self.hasBind = true;
    });

    this.bus.$on('bind-new-ftc', function(){
      self.hasBind = true;
    });

    this.bus.$on("select-dtc", function(arg){
      let dtc = arg[0];

      for (const key in self.relateKeys) {
        let dtcKey = self.relateKeys[key];
        self[key] = dtc[dtcKey];
      }
      self.emitToParent();
    });
    this.emitToParent();
  },
  mounted(){
    let queryUrl = location.href;
    if (queryUrl.indexOf('flow_04_upload') != -1) {
      setTimeout(()=> {
        let flow_04_upload_top = document.getElementById('flow_04_upload').offsetTop;
        let docEle = document.documentElement || document.body;
        docEle.scrollTop = flow_04_upload_top + 90;
      },10)
    }

  },
  updated(){
  },
  watch: {
    datas(newValue, oldValue){
      this.keys.forEach(key => {
        this[key] = _.cloneDeep(newValue[key]);
      });
    }
  },
  methods: {

    /**
    * 更新数据到父组件
    */
    emitToParent(){
      let obj = {};
      this.keys.forEach(key => {
        obj[key] = this[key];
      });
      this.$emit("fromLA",  'tcflefttofactory_leftapply', obj);
    },

    checkBoxRadio(type, event) {
      let value = event.target.value;
      if (type === 'selPayMethods') {
        this.tl_checkedPayMethods = [value];
      } else if (type === 'thisPaymentType') {
        this.tl_thisPaymentTypes = [value];
      } else if (type === 'nonPaymentType') {
        this.tl_nonPaymentTypes = [value];
      }
      this.emitToParent();
    },

    handleSimpleInput(){
      this.emitToParent();
    },

    selectDate(value){
      this.emitToParent();
    },
    selectType(value){
      this.emitToParent();
    },

    selectFiles(event) {
      //票据附件
      let self = this;

      //直接上传，并且获得后端返回的文件的url,将url保存到 this.data.attachedFiles中
      uploadFiles(event.target.files).then((resArr)=>{
        resArr.forEach(function(res,i){
          self.attachedFiles.push({name: event.target.files[i].name, status: 1, id: res.data.datas[0].id});
        });
        self.emitToParent();
      });
    },
    changeFiles(index,item) {
      deleteFile({'id':item.id}).then((res) => {
        if(res.code != 1 ){
          this.$message.error('删除失败，请检查网络后重试');
        } else {
          this.attachedFiles.splice(index, 1);
          this.emitToParent();
        }
      });
    },
    handleOver(item){
      item.status = 0;
      this.$forceUpdate();
    },
    handleOut(item){
      item.status = 1;
      this.$forceUpdate();
    },
    download(id, event){
      window.open('http://47.104.93.41/api/common/download?id='+id);
    },
  },
  data() {
    return {
            id: '',
            formInstId: '',
            attachedFiles: [],
            tl_applicant: '',
            tl_applicationDate: '',
            tl_applicationDepart: '',
            tl_checkedPayMethods: [],
            tl_payCompany: '',
            tl_payBank: '',
            tl_payAccount: '',
            tl_collectionCompany: '',
            tl_collectionBank: '',
            tl_collectionAccount: '',
            tl_paymentAmount: 0,
            tl_paymentBigAmount: 0,
            tl_paymentAbstract: '',
            tl_businessType: '垫税',
            tl_signDate: '',
            tl_contractAmount: 0,
            tl_payedMount: 0,
            tl_thisPaymentTypes: [],
            tl_nonPaymentTypes: [],
            tl_thisPaymentAmount: 0,
            tl_nonPaymentAmount: 0,
            tl_dtcNO: '',
            keys: [
              "id",
              "formInstId",
              "attachedFiles",
              "tl_applicant",
              "tl_applicationDate",
              "tl_applicationDepart",
              "tl_checkedPayMethods",
              "tl_payCompany",
              "tl_payBank",
              "tl_payAccount",
              "tl_collectionCompany",
              "tl_collectionBank",
              "tl_collectionAccount",
              "tl_paymentAmount",
              "tl_paymentBigAmount",
              "tl_paymentAbstract",
              "tl_businessType",
              "tl_signDate",
              "tl_contractAmount",
              "tl_payedMount",
              "tl_thisPaymentTypes",
              "tl_nonPaymentTypes",
              "tl_thisPaymentAmount",
              "tl_nonPaymentAmount",
              "tl_dtcNO"
            ],
            relateKeys: {
              "tl_collectionCompany": "bd_seller",
              "tl_collectionBank": "bd_ch_name",
              "tl_collectionAccount": "bd_ch_account",
              "tl_dtcNO": "bd_no",
              "tl_signDate": "bd_date",
              "tl_contractAmount": "bd_table1_amount"         
            },
            tl_businessTypeoptions: [
              '垫税', 'O/A', '代理'
            ],
            hasBind: false
    }
  },
  props: {
    datas: {
      type: Object,
      required: true
    },
    editable: {
      type: Boolean,
      required: true
    },
    bus: {
      type: Object,
      required: true
    }
  }
}
</script>

<style lang="scss">
.leftapply {
    // padding: 20px;

    .tcftofactory-top {
        border: 1px solid #999;

        h2 {
            text-align: center;
            padding: 20px;
        }

        a {
            color: #409EFF;
        }

        .tcf-table {
            padding: 20px;

            input[type=number],
            input[type=text] {
              width: 90%;
              height: 90%;
              border: none;
              outline: none;
            }

            h2 {
                text-align: center;
                padding: 10px 0;
            }

            .tcf-table-wrap {
                border-left: 1px solid #999;
                border-top: 1px solid #999;
            }

            .tcf-table-title {
                text-align: center;

                .tcf-table-title-left {
                    position: relative;
                    left: -1px;
                }
            }

            .tcf-table-noright {
                border-right: none !important;
            }

            .el-date-editor {
                width: 100%;
            }

            .el-col {
                height: 50px;
                line-height: 50px;
                padding-left: 5px;

                border-right: 1px solid #999;
                border-bottom: 1px solid #999;
            }

            .no-border {
                border: none !important;
            }

            .special-row {
                .el-col {
                    height: 25px;
                    line-height: 25px;
                }
            }

            .el-input__inner {
                border: none;
            }
        }

        .btns {
            padding: 20px 0;

            .bind {
                float: left;
            }
            .export {
                float: right;
            }
        }

        .select-orders {

            padding: 20px 0;

            li {
                padding: 5px 0;
            }
            .order-left {
                float: left;
            }
            .order-right {
                float: right;
            }
        }

        .bind-window {
            .el-form--inline .el-form-item {
                margin-right: 15px;
            }

            td {
                border: 1px solid #e6ebf5;
            }

            td:not(.el-table_1_column_1) {
                width: 120px;
                min-width: 120px;
            }

            .dialog-footer {
                text-align: center;
                button {
                    margin-right: 80px;
                }
            }

            a {
                color: #409EFF;
            }

        }

        .upload {
            padding: 20px;
            > div {
                border: 1px solid #999;
                padding: 20px 0 40px 20px;
            }

            .upload-btn {
                position: relative;
                > input {
                    opacity: 0;
                    width: 100px;
                    height: 40px;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            }

            .upload-files {

                > li {
                    width: 300px;
                    padding: 10px 0;
                    transition: all 0.5s linear;

                    &:hover {

                      >span {
                        color: #409EFF;
                      }
                    }
                  }

                font-size: 16px;
                span {
                    padding: 0 10px;
                    cursor: pointer;
                    display: inline;
                }
                span.el-icon-close:hover {
                    cursor: pointer;
                }
            }
            .upload-hint {
                font-size: 20px;
                margin-bottom: 10px;
            }
        }
    }
}
</style>
